// import Home from '../pages/Home' // 注意: 所有的模块化规范都是这样规定的,如果要引入的是某个文件夹中的index.js.则index.js可以忽略
// import About from '../pages/About'
// import News from '../pages/News'
// import Message from '../pages/Message'
// import Detail from '../pages/Detail'
import React, { lazy, Suspense } from 'react'
const Home = React.lazy(() => import('../pages/Home'))
const About = React.lazy(() => import('../pages/About'))
const News = React.lazy(() => import('../pages/News'))
const Message = React.lazy(() => import('../pages/Message'))
const Detail = React.lazy(() => import('../pages/Detail'))

const susp = (Comp) => {
  return (
    <Suspense
      fallback={
        <div style={{ color: 'red', fontSize: 30 }}>正在加载。。。</div>
      }
    >
      <Comp></Comp>
    </Suspense>
  )
}
export default [
  {
    path: 'home',
    element: susp(Home),
    children: [
      {
        path: 'news',
        element: susp(News),
      },
      {
        path: 'message',
        element: susp(Message),
        children: [
          {
            path: 'detail/:id',
            element: susp(Detail),
          },
        ],
      },
    ],
  },
  {
    path: 'about',
    element: susp(About),
  },
]
